$(function(){
    window.requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
    var svgWidth=$(window).width();
    $(window).resize(function(){
        svgWidth=$(window).width();
    })
    function line(){

        offset+=1;
        var a=6;
        var w=2.5*Math.PI;
        var h=0;
        var html="";

        var line01="";
        var line02="";


        function LineY(x){
            return a*Math.sin(((w*x)/svgWidth+2*offset*Math.PI/svgWidth))+h;
        }
        function LineY2(x){
            return a*Math.sin(((w*x)/svgWidth+3*offset*Math.PI/svgWidth+ Math.PI/4))+h;
        }

        for(var i=0; i<=svgWidth;i++){
            var y=LineY(i);
            var y2=LineY2(i);
            var x=i;
            line01+=i+','+(-y+a)+' ';
            line02+=i+','+(-y2+a)+' ';
        }
        line01+=svgWidth+',40 0,40';
        line02+=svgWidth+',40 0,40';
        $("#line01").attr('points',line01);
        $("#line02").attr('points',line02);
        window.requestAnimationFrame(line);
    }
    var offset=0;
    line();
});